// Dom7
var $$ = Dom7;

// Framework7 App main instance
var app  = new Framework7({
  root: '#app', // App root element
  id: 'io.framework7.testapp', // App bundle ID
  name: '喜刷刷', // App name
  theme: 'md', // Automatic theme detection
    panel: {
        swipe: 'left',
    },
  // App root data
  data: function () {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },
      // Demo products for Catalog section
      products: [
        {
          id: '1',
          title: 'Apple iPhone 8',
          description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
        },
        {
          id: '2',
          title: 'Apple iPhone 8 Plus',
          description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
        },
        {
          id: '3',
          title: 'Apple iPhone X',
          description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
        },
      ]
    };
  },
  touch:{
      materialRipple:false,
  },
    on: {
        pageInit: function () {
            //app.loginScreen.open('#my-login-screen');
        },
    },
  // App root methods
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },
  },
  // App routes
  routes: routes,
});


$$('.my-theme-blue').on('click', function(){
		app.dialog.alert('nihk');
});


$$(document).on('page:init', '.page[data-name="home"]', function () {
  // Do something here when page with data-name="about" attribute loaded and initialized
  app.loginScreen.open('#my-login-screen');
});

//隐藏导航栏
$$('.hide-navbar').on('click', function () {
  app.navbar.hide('.navbar');
});
$$('.show-navbar').on('click', function () {
  app.navbar.show('.navbar');
});

// Init/Create views
var homeView = app.views.create('#view-home', {
  url: '/'
});
// var catalogView = app.views.create('#view-catalog', {
//   url: '/catalog/'
// });
var settingsView = app.views.create('#view-settings', {
  url: '/mine/'
});

//Login Screen Demo
$$('#my-login-screen .login-button').on('click', function () {
  var username = $$('#my-login-screen [name="username"]').val();
  var password = $$('#my-login-screen [name="password"]').val();
	app.preloader.show();
	app.preloader.hide();
	
  // Close login screen
  app.loginScreen.close('#my-login-screen');

  // Alert username and password
  app.dialog.alert('Username: ' + username + '<br>Password: ' + password);
});





// function theme() {
//         var themeCol = document.getElementById("mySelect").value;
//         var app = document.getElementById('app');
//         if (themeCol == 'blue') {
//             app.className = 'color-theme-blue framework7-root';
//         } else if (themeCol == 'orange') {
//             app.className = 'color-theme-orange framework7-root';
//         } else if (themeCol == 'dark') {
//             app.className = 'color-theme-black theme-dark framework7-root';
//         } else if (themeCol == 'purple') {
//             app.className = 'color-theme-pink framework7-root';
//         } else if (themeCol == 'pink') {
//             app.className = 'color-theme-pink framework7-root';
//         } else if (themeCol == 'gray') {
//             app.className = 'color-theme-gray framework7-root';
//         }
//     }




///提示框

$$('.open-alert').on('click', function () {
    app.dialog.alert('OK');
});

// Confirm
$$('.open-confirm').on('click', function () {
    app.dialog.confirm('Are you feel good today?', function () {
        app.dialog.alert('Great!');
    });
});

// Prompt
$$('.open-prompt').on('click', function () {
    app.dialog.prompt('What is your name?', function (name) {
        app.dialog.confirm('Are you sure that your name is ' + name + '?', function () {
            app.dialog.alert('Ok, your name is ' + name);
        });
    });
});

// Login
$$('.open-login').on('click', function () {
    app.dialog.login('Enter your username and password', function (username, password) {
        app.dialog.alert('Thank you!<br>Username:' + username + '<br>Password:' + password);
    });
});

// Password
$$('.open-password').on('click', function () {
    app.dialog.password('Enter your username and password', function (password) {
        app.dialog.alert('Thank you!<br>Password:' + password);
    });
});

// Vertical Buttons
$$('.open-vertical').on('click', function () {
    app.dialog.create({
        title: 'Vertical Buttons',
        text: 'Dialog with vertical buttons',
        buttons: [
            {
                text: 'Button 1',
            },
            {
                text: 'Button 2',
            },
            {
                text: 'Button 3',
            },
        ],
        verticalButtons: true,
    }).open();
});

// Preloader
$$('.open-preloader').on('click', function () {
    app.dialog.preloader();
    setTimeout(function () {
        app.dialog.close();
    }, 3000);
});

// Preloader with custom text
$$('.open-preloader-custom').on('click', function () {
    app.dialog.preloader('My text...');
    setTimeout(function () {
        app.dialog.close();
    }, 3000);
});

// Progress
$$('.open-progress').on('click', function () {
    var progress = 0;
    var dialog = app.dialog.progress('Loading assets', progress);
    dialog.setText('Image 1 of 10');
    var interval = setInterval(function () {
        progress += 10;
        dialog.setProgress(progress);
        dialog.setText('Image ' + ((progress) / 10) + ' of 10');
        if (progress === 100) {
            clearInterval(interval);
            dialog.close();
        }
    }, 300)
});

// Progress Infinite
$$('.open-progress-infinite').on('click', function () {
    app.dialog.progress();
    setTimeout(function () {
        app.dialog.close();
    }, 3000);
});
